<template>
  <div>
    <div style="padding: 10px 60px 5px 60px">
      <el-form :inline="true" :model="formInline"  class="demo-form-inline">

        <div class="text">查询已有商品</div>
        <br/>
        <el-form-item label="商品Id">
          <el-input v-model="formInline.productId" placeholder="productName"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="formInline.productName" placeholder="productName"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-input v-model="formInline.productType" placeholder="productType"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="onSubmit" style="width: 100px;margin: 0 20px;">查询</el-button>
          <el-button style="width: 100px;margin: 0 0px;">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding: 5px 30px">
      <div class="text1">查询结果</div>
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          property="productName"
          label="商品名"
          width="180">
        </el-table-column>
        <el-table-column
          property="productPrice"
          label="商品价格"
          width="180">
        </el-table-column>
        <el-table-column
          property="stock"
          label="库存"
          width="180">
        </el-table-column>
        <el-table-column
          property="onShow"
          label="上下架状态"
          width="180">
        </el-table-column>
        <el-table-column
          label="查看详情">
          <template slot-scope="scope">
            <router-link  :to="{path: '/productmanage/product',
          query: {productName: scope.row.productName,productId: scope.row.productId,typeCode: scope.row.typeCode,introduction: scope.row.introduction,specifications: scope.row.specifications,image: scope.row.image }}">
              <el-button @click="handleEdit(scope.$index, scope.row)"
                         size="mini"
                         type="danger"
              >查看</el-button>
            </router-link>
<!--            <div v-if="scope.row.onShow=1">-->
              <el-button
                size="mini"
                type="danger"
                @click="down(scope.row.productName)">下架</el-button>
<!--            </div>-->
<!--            <div v-if="scope.row.onShow=0">-->
              <el-button
                size="mini"
                type="danger"
                @click="up(scope.row.productName)">上架</el-button>
<!--            </div>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        formInline: {
          productId: '',
          productName: '',
          productType: ''
        },
        tableData:[],
        currentRow:1
      }
    },
    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      onSubmit() {
        let search={
          productId:this.formInline.productId,
          productName:this.formInline.productName,
          productType:this.formInline.productType,
          queryFlag:0
        }
        if(search.productName!=""){
          search.queryFlag= 3
        }else if(search.productId!=""){
          search.queryFlag=1
        }else if(search.productType!=""){
          search.queryFlag=2
        }

        this.$axios({
          header:{
            "Content-Type": "application/json"
          },
          method:"post",
          url:"http://localhost:8080/api/product/getproductinfo",
          data:{
            queryFlag:search.queryFlag,
            productId:search.productId,
            productName:search.productName,
            productType:search.productType
          }
        }).then((res)=>{
          if(res.data.resultCode==="0"){
            this.$message({
              message: '查询成功'+search.queryFlag,
              type: 'success'
            });
            this.tableData=res.data.productList;
          }
        }).catch((error)=>{
          console.log(error);
        })
        console.log('submit!');
      },
      up(productName) {
        this.$confirm('此操作将上架该类别, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          width:80,
          center:true
        }).then(() => {
          this.upproduct(productName)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消上架操作'
          });
        });
      },
      down(productName) {
        this.$confirm('此操作将下架该类别, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          width:80,
          center:true
        }).then(() => {
          this.downproduct(productName)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架操作'
          });
        });
      },
      upproduct:function(productName) {
        const dd={productName:productName}
        this.$axios({
          headers:{
            "Content-Type":"application/json"
          },
          method: "post",
          url:"http://localhost:8080/api/product/updateproduct",
          data:{
            productName:dd.productName,
            onShow:1
          }
        }).then((res)=>{
          if(res.data.resultCode==="0"){
            this.$message({
              message: '上架成功',
              type: 'success'
            })
          }
        }).catch((error)=>{
          console.log(error);
        })
      },
      downproduct:function(productName) {
        const dd={productName:productName}
        this.$axios({
          headers:{
            "Content-Type":"application/json"
          },
          method: "post",
          url:"http://localhost:8080/api/product/updateproduct",
          data:{
            productName:dd.productName,
            onShow:0
          }
        }).then((res)=>{
          if(res.data.resultCode==="0"){
            this.$message({
              message: '下架成功',
              type: 'success'
            })
          }
        }).catch((error)=>{
          console.log(error);
        })
      }
    }
  }
</script>

<style scoped>
  .text {
    font-size: 30px;
    line-height: 46px;
    text-align: center;
  }
  .text1 {
    font-size: 20px;
    line-height: 30px;
    text-align: center;
  }
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

